<template>
  <div class="personal">
    <div class="top">
      <img src="./images/1.jpg" alt="" />
      <div class="content">
        <h1>比特跃动</h1>
        <span>ID:admin</span>
      </div>
      <div class="right">
        <img class="image" src="./images/2.gif" alt="" />
        <img class="image" src="./images/3.gif" alt="" />
        <img class="image" src="./images/4.gif" alt="" />
      </div>
    </div>
    <div class="my">
      <div class="m">
        <div class="text-1">关注了</div>
        <div class="text-2">0</div>
      </div>
      <div class="line"></div>
      <div class="m">
        <div class="text-1">关注者</div>
        <div class="text-2">0</div>
      </div>
      <el-button class="btn">编辑个人资料</el-button>
      <div class="brief">
        <h1>个人简介</h1>
        <img src="./images/1.png" alt="" />
        <div class="line"></div>
      </div>
      <div class="achieve">
        <h1>成就贡献</h1>
        <li class="li">
          <svg
            t="1650374187619"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4627"
            width="21"
            height="21"
          >
            <path
              d="M916.2 328.5L735.7 148.8c-6.8-6.8-15.2-10.1-24.6-10.1H311.2c-9.3 0-17.8 3.4-24.6 10.1L106.1 328.5c-6.8 6.8-10.1 15.2-10.1 24.6v71.2c0 8.5 3.4 17 8.5 22.9l381.3 426.3c13.5 15.2 37.2 15.2 50.9 0L918 447.2c5.9-5.9 8.5-14.4 8.5-22.9v-71.2c-0.1-9.3-3.5-17.8-10.3-24.6z m-58.4 105.9L511.2 822.5 164.7 434.4v-82.2l167.8-166.8h358.4l167.8 166.9v82.2h-0.8v-0.1z m0 0"
              fill="#27C7F2"
              p-id="4628"
            ></path>
            <path
              d="M332.4 184.5L164.7 351.3v82.2l346.6 388.9 346.6-388.1v-82.2L690 184.5H332.4z m178.8 508.4l-257.6-344h152.6L394.3 381l116.9 159.3 117-158.5-11.9-32.2h152.6L511.2 692.9z m0 0"
              fill="#6CE0FF"
              p-id="4629"
            ></path>
            <path
              d="M628.2 381l-117 159.3L394.3 381l11.9-32.2H253.6L511.2 692v0.8l257.6-343.2H616.3l11.9 31.4z m0 0"
              fill="#FFFFFF"
              p-id="4630"
            ></path>
          </svg>
          <span>声望等级</span>
          <svg
            t="1650374456035"
            class="icon1"
            viewBox="0 0 2048 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="8220"
            width="32"
            height="32"
          >
            <path
              d="M953.237152 238.936997h1060.859049c18.704979 0 33.894242 15.291662 33.894242 34.133174 0 6.178105-1.672526 12.287943-4.846911 17.544451l-336.723762 564.699232A135.508701 135.508701 0 0 1 1590.05978 921.600478H546.130785L953.237152 238.936997z"
              fill="#FF9700"
              p-id="8221"
            ></path>
            <path
              d="M1023.995221 785.067782l238.932219-409.598089h375.464914l-238.932218 409.598089H1023.995221z m338.498687-170.665871h-102.399522l-59.733054 102.399523h102.399522l59.733054-102.399523z m99.532336-170.66587h-102.399522l-59.733055 102.399522h102.399522l59.733055-102.399522z"
              fill="#FFFFFF"
              p-id="8222"
            ></path>
            <path
              d="M955.728873 238.936997L546.130785 921.600478h170.66587L1126.394743 238.936997z"
              fill="#F48000"
              p-id="8223"
            ></path>
            <path
              d="M193.67163 170.670649a33.109179 33.109179 0 0 1 28.432934 15.632994l275.693646 457.384532a16.861788 16.861788 0 0 0 28.398801 0l275.693647-457.384532A33.109179 33.109179 0 0 1 830.323592 170.670649h177.287706c9.045291 0 16.383924 6.963168 16.383923 15.530594 0 2.696521-0.75093 5.358908-2.15039 7.679964l-495.613687 822.268163a16.861788 16.861788 0 0 1-28.432934 0L2.184523 193.881207a15.086863 15.086863 0 0 1 6.075705-21.162568A17.066587 17.066587 0 0 1 16.383924 170.670649h177.287706z m504.89791-34.133174c3.310918 0 6.553569 0.955729 9.386623 2.79892a20.616437 20.616437 0 0 1 6.246371 27.033474l-186.57193 336.075232a19.046311 19.046311 0 0 1-6.24637 6.758368 17.476185 17.476185 0 0 1-25.019617-6.758368L309.792688 166.369869A20.923636 20.923636 0 0 1 307.198566 156.232316C307.198566 145.343834 315.390528 136.537475 325.425681 136.537475h373.143859z"
              fill="#FFD599"
              p-id="8224"
            ></path>
            <path
              d="M465.371695 89.536094h93.251831C682.936546-42.320357 745.093056 10.415397 745.093056 10.415397c62.15651 52.735754 51.814158 123.050092-31.061188 210.943015-41.437673 35.157169-93.251831 17.578585-155.408342-52.735754h-93.251831C403.215185 238.936997 351.401027 256.515582 309.963354 221.358412 227.088007 133.465489 216.745655 63.151151 278.902165 10.415397c0 0 62.122377-52.735754 186.46953 79.120697z"
              fill="#FF9700"
              p-id="8225"
            ></path>
          </svg>
        </li>
        <li>
          <svg
            t="1650375454800"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="45890"
            width="22"
            height="22"
          >
            <path
              d="M512 192c156.448 0 296.021333 98.730667 418.410667 291.605333a52.938667 52.938667 0 0 1 0 56.789334C808.021333 733.269333 668.448 832 512 832c-156.448 0-296.021333-98.730667-418.410667-291.605333a52.938667 52.938667 0 0 1 0-56.789334C215.978667 290.730667 355.552 192 512 192z m0 128c-106.037333 0-192 85.962667-192 192s85.962667 192 192 192 192-85.962667 192-192-85.962667-192-192-192z m0 320c70.688 0 128-57.312 128-128s-57.312-128-128-128-128 57.312-128 128 57.312 128 128 128z"
              p-id="45891"
              fill="#d81e06"
            ></path>
          </svg>
          <span>阅读总数 0</span>
          <h3>昨日 0</h3>
        </li>
        <li>
          <svg
            t="1650375241069"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="32999"
            width="20"
            height="20"
          >
            <path
              d="M691.7 134.8c-73.5 0-131.7 37.5-176.4 99-45.1-61.5-102.9-99-176.4-99C206.2 134.8 98 254.1 98 401.3c0 87.8 38.8 149.3 69.8 198.6 89.7 144 306.5 298.6 316 306.1 9.4 7.5 19.9 10.7 31 10.7 11 0 21.5-3.7 31-10.7 9.4-7.5 226.2-162.7 316.5-306.1 31-49.2 69.8-110.8 69.8-198.6-0.1-146.7-108.2-266.5-240.4-266.5z"
              fill="#0DCEA7"
              p-id="33000"
            ></path>
            <path
              d="M261.2 149C166.4 184.8 98 284.3 98 401.3c0 15.3 1.2 29.9 3.3 43.7 7.8-120.9 68.8-227.3 159.9-296zM434.3 868.4c27.9 21.8 46.8 35.4 49.5 37.5 9.4 7.5 19.9 10.7 31 10.7 11 0 21.5-3.7 31-10.7 2.9-2.3 25.3-18.5 57.6-44-31.8 8.1-65.2 12.4-99.6 12.4-23.7 0.1-46.9-2-69.5-5.9zM731.8 138.5C837.6 211.2 907 333 907 471.1c0 19.3-1.4 38.3-4 56.9 16.5-35.5 29-76.9 29-126.7 0-131.5-86.9-241.5-200.2-262.8z"
              fill="#0DCEA7"
              p-id="33001"
            ></path>
            <path
              d="M343.6 134.8c-1.5 0-3.1-0.1-4.6-0.1-27.2 0-53.4 5-77.8 14.3-91.1 68.7-152.1 175.1-159.8 296 10 65.2 40.9 114.2 66.5 154.9 4.9 7.8 10.2 15.7 15.8 23.6-28.6-50.6-45-109-45-171.3-0.1-141.3 84-262.8 204.9-317.4zM731.8 138.5c-13.1-2.5-26.5-3.8-40.1-3.8-17.3 0-33.8 2.1-49.4 6.1 114 57.2 192.3 175.1 192.3 311.4 0 192.2-155.8 348-348 348-80.9 0-155.4-27.6-214.5-74 57.5 57.9 120.1 109.3 162.3 142.2 22.6 3.9 45.8 6 69.4 6 34.4 0 67.7-4.3 99.6-12.4 72.9-57.6 196.3-162.7 258.9-262.1 13.4-21.3 28.2-44.8 40.8-71.8 2.6-18.6 4-37.6 4-56.9-0.1-138.2-69.5-260-175.3-332.7z"
              fill="#1DD49C"
              p-id="33002"
            ></path>
            <path
              d="M834.6 452.2c0-136.2-78.3-254.2-192.3-311.3-19.9 5.1-38.4 13.2-55.7 24C690 210.1 762.2 313.2 762.2 433.2c0 161.7-131.1 292.7-292.7 292.7s-292.8-131-292.8-292.7c0-140.6 99.1-258 231.2-286.2-19.9-7.5-41.3-11.7-64.3-12.2-120.9 54.5-205 176.1-205 317.3 0 62.3 16.4 120.7 45 171.3 24.7 34.9 55.8 69.8 88.5 102.7 59.1 46.3 133.6 74 214.5 74 192.2 0.1 348-155.7 348-347.9z"
              fill="#2DDB92"
              p-id="33003"
            ></path>
            <path
              d="M176.7 433.2c0 161.7 131.1 292.7 292.7 292.7s292.7-131.1 292.7-292.7c0-120-72.2-223.1-175.6-268.3-14 8.8-27.2 19.4-39.5 31.6 84 36.6 142.7 120.3 142.7 217.8 0 131.2-106.3 237.5-237.5 237.5S214.8 545.4 214.8 414.3s106.3-237.5 237.5-237.5c3 0 5.9 0.1 8.8 0.2-16.5-12.7-34.2-22.9-53.2-30-132.1 28.2-231.2 145.6-231.2 286.2z"
              fill="#3DE188"
              p-id="33004"
            ></path>
            <path
              d="M214.8 414.3c0 131.2 106.3 237.5 237.5 237.5s237.5-106.3 237.5-237.5c0-97.4-58.7-181.2-142.7-217.8-10.8 10.7-21 22.7-30.6 35.7 59.8 29.9 100.9 91.7 100.9 163.1 0 100.6-81.6 182.2-182.2 182.2S253 495.9 253 395.3s81.6-182.2 182.2-182.2c27.8 0 54.2 6.2 77.8 17.4-15.7-20.9-32.9-38.9-51.8-53.5-2.9-0.1-5.9-0.2-8.8-0.2-131.3 0-237.6 106.3-237.6 237.5z"
              fill="#4CE77D"
              p-id="33005"
            ></path>
            <path
              d="M252.9 395.3c0 100.6 81.6 182.2 182.2 182.2s182.2-81.6 182.2-182.2c0-71.4-41.1-133.2-100.9-163.1-0.4 0.5-0.8 1-1.1 1.5-0.8-1.1-1.6-2.2-2.5-3.3-23.6-11.1-49.9-17.4-77.8-17.4-100.6 0.1-182.1 81.7-182.1 182.3z m292-19c0 70.1-56.8 127-127 127s-127-56.8-127-127 56.8-127 127-127 127 56.9 127 127z"
              fill="#5CEE73"
              p-id="33006"
            ></path>
            <path
              d="M417.9 376.3m-127 0a127 127 0 1 0 254 0 127 127 0 1 0-254 0Z"
              fill="#6CF468"
              p-id="33007"
            ></path>
            <path
              d="M691.7 152.8c29.7 0 58.5 6.5 85.7 19.3 26.4 12.4 50.2 30.3 70.7 53 20.6 22.9 36.8 49.5 48.2 79.1 11.8 30.8 17.8 63.4 17.8 97.1 0 36.5-7.1 71.4-21.8 106.6-13 31.1-30 58.2-45 82.1l-0.2 0.3c-34.4 54.6-91.8 117.7-170.6 187.3-62.4 55.2-117.9 96.5-136.2 110-3 2.2-4.4 3.3-5.3 4-6.4 4.7-13.2 7-20.1 7-7.5 0-14-2.2-19.8-6.8-0.9-0.7-2.3-1.8-5.8-4.3-18.3-13.5-73.9-54.8-136.2-109.9-78.6-69.5-135.8-132.6-170-187.3l-0.2-0.4c-15-23.9-32.1-51-45-82.1-14.7-35.2-21.8-70.1-21.8-106.6 0-137 100-248.5 222.9-248.5 32.3 0 62.5 8.1 89.7 24 26 15.2 50.3 37.9 72.1 67.7l14.6 19.9 14.5-20c21.5-29.6 45.6-52.3 71.8-67.6 27.4-15.9 57.6-23.9 90-23.9m0-18c-73.5 0-131.7 37.5-176.4 99-45.1-61.5-102.9-99-176.4-99C206.2 134.8 98 254.1 98 401.3c0 87.8 38.8 149.3 69.8 198.6 89.7 144 306.5 298.6 316 306.1 9.4 7.5 19.9 10.7 31 10.7 11 0 21.5-3.7 31-10.7 9.4-7.5 226.2-162.7 316.5-306.1 31-49.2 69.8-110.8 69.8-198.6-0.1-146.7-108.2-266.5-240.4-266.5z"
              fill="#0EC69A"
              p-id="33008"
            ></path>
            <path
              d="M603.4 270c-36.8 0-65.9 19.1-88.2 50.6-22.6-31.4-51.5-50.6-88.2-50.6-66.4 0-120.5 61-120.5 136.1 0 44.8 19.4 76.3 34.9 101.4 44.9 73.5 153.3 152.5 158 156.4 4.7 3.8 10 5.5 15.5 5.5s10.8-1.9 15.5-5.5c4.7-3.8 113.1-83.1 158.3-156.4 15.5-25.2 34.9-56.6 34.9-101.4 0-74.8-54.1-136.1-120.2-136.1z"
              fill="#9CFFBD"
              p-id="33009"
            ></path>
            <path
              d="M225 274c-4 0-8-1.3-11.3-4-7.7-6.3-8.9-17.6-2.7-25.3 57.5-71 144.2-62.6 147.9-62.2 9.9 1.1 17 9.9 16 19.8-1.1 9.9-9.9 17-19.8 16-0.6-0.1-18.6-1.7-41.9 3.7-30.6 7-55.5 22.3-74.2 45.4-3.6 4.3-8.8 6.6-14 6.6z"
              fill="#FFFFFF"
              p-id="33010"
            ></path>
            <path
              d="M187.4 335.6c-2.4 0-4.8-0.5-7.1-1.5-9.1-3.9-13.4-14.5-9.5-23.6l5.3-12.3c3.9-9.1 14.5-13.4 23.6-9.5 9.1 3.9 13.4 14.5 9.5 23.6l-5.3 12.3c-2.9 7-9.5 11-16.5 11z"
              fill="#FFFFFF"
              p-id="33011"
            ></path>
          </svg>
          <span>获得点赞 0</span>
          <h3>昨日 0</h3>
        </li>
        <li>
          <svg
            t="1650375133268"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="28210"
            width="20"
            height="20"
          >
            <path
              d="M427.631 150.163c-58.267 95.022-141.511 155.612-249.73 181.765-108.217 26.155-126.224 81.673-54.019 166.554 72.204 84.883 103.998 182.918 95.387 294.104s38.533 145.499 141.43 102.936c102.893-42.562 205.788-42.562 308.684 0 102.891 42.562 150.036 8.25 141.421-102.936-8.608-111.186 23.188-209.221 95.393-294.104 72.201-84.881 54.195-140.399-54.021-166.554-108.217-26.153-191.463-86.743-249.73-181.765-58.272-95.024-116.542-95.024-174.815 0z"
              fill="#FFA820"
              p-id="28211"
            ></path>
            <path
              d="M866.566 335.734c23.802 49.345 37.995 104.195 40.155 162.121 68.269-80.619 54.888-134.66-40.155-162.121zM92.569 453.413a406.489 406.489 0 0 1 28.373-100.714c-41.618 23.102-51.081 56.672-28.373 100.714zM355.737 897.531c-51.473-19.016-98.077-48.079-137.43-84.814-1.449 93.431 44.362 121.703 137.43 84.814zM573.729 111.044c-37.372-40.921-74.744-42.756-112.116-5.506a414.758 414.758 0 0 1 35.994-1.564c26.012 0 51.456 2.432 76.122 7.07zM656.98 890.605a462.555 462.555 0 0 1 12.403 4.917c102.891 42.562 150.036 8.25 141.421-102.936a465.55 465.55 0 0 1-0.891-14.477c-41.179 48.53-93.465 87.341-152.933 112.496z"
              fill="#FEAC33"
              p-id="28212"
            ></path>
            <path
              d="M613.07 166.677a461.698 461.698 0 0 1-10.624-16.514c-9.572-15.61-19.144-28.638-28.717-39.119-24.666-4.638-50.109-7.07-76.122-7.07-12.129 0-24.133 0.531-35.994 1.564-10.072 10.039-20.144 22.916-30.216 38.633a356.411 356.411 0 0 1 48.778-3.343c47.008-0.001 91.87 9.183 132.895 25.849zM164.416 335.479c-17.11 4.887-31.599 10.627-43.473 17.219A406.5 406.5 0 0 0 92.57 453.412c7.203 13.97 17.636 28.992 31.312 45.069a470.582 470.582 0 0 1 3.081 3.663 361.655 361.655 0 0 1-0.094-8.011c-0.001-57.054 13.529-110.947 37.547-158.654zM906.196 498.482c0.179-0.21 0.348-0.417 0.525-0.626-2.159-57.927-16.353-112.776-40.155-162.121a337.172 337.172 0 0 0-14.391-3.806c-25.257-6.104-49.135-14.109-71.671-23.964 33.581 54.058 52.977 117.848 52.977 186.17 0 195.126-158.181 353.307-353.306 353.307-102.974 0-195.654-44.058-260.231-114.346 1.116 19.394 0.895 39.223-0.675 59.491a326.777 326.777 0 0 0-0.963 20.131c39.353 36.734 85.957 65.797 137.43 84.814 1.64-0.65 3.293-1.318 4.962-2.009 98.759-40.852 197.519-42.486 296.281-4.917 59.469-25.156 111.754-63.966 152.933-112.497-4.86-105.237 27.23-198.448 96.284-279.627z"
              fill="#FEB133"
              p-id="28213"
            ></path>
            <path
              d="M480.175 847.44c195.126 0 353.306-158.181 353.306-353.307 0-68.322-19.396-132.112-52.977-186.17-68.304-29.87-124.124-76.955-167.434-141.286-41.024-16.666-85.887-25.85-132.895-25.85a356.4 356.4 0 0 0-48.778 3.343 363.085 363.085 0 0 0-3.766 5.992 451.062 451.062 0 0 1-22.343 33.089 298.622 298.622 0 0 1 57.456-5.57c164.143 0 297.207 133.064 297.207 297.207S626.887 772.096 462.744 772.096 165.536 639.032 165.536 474.889c0-55.099 15.012-106.684 41.141-150.922a454.734 454.734 0 0 1-28.776 7.961 337.634 337.634 0 0 0-13.485 3.552c-24.017 47.707-37.547 101.599-37.547 158.654 0 2.678 0.035 5.347 0.094 8.011 57.074 68.495 88.064 145.479 92.981 230.949 64.577 70.289 157.257 114.346 260.231 114.346z"
              fill="#FEB633"
              p-id="28214"
            ></path>
            <path
              d="M462.744 772.096c164.143 0 297.207-133.064 297.207-297.207S626.887 177.681 462.744 177.681a298.622 298.622 0 0 0-57.456 5.57c-11.787 15.877-24.419 30.59-37.883 44.155 24.44-8.34 50.644-12.872 77.908-12.872 133.16 0 241.108 107.948 241.108 241.108s-107.948 241.11-241.109 241.11-241.108-107.948-241.108-241.109c0-57.298 20-109.917 53.382-151.287-16.245 7.536-33.208 14.082-50.909 19.611-26.13 44.238-41.141 95.823-41.141 150.922 0 164.143 133.065 297.207 297.208 297.207z"
              fill="#FFBC34"
              p-id="28215"
            ></path>
            <path
              d="M445.312 696.752c133.16 0 241.108-107.948 241.108-241.108S578.473 214.535 445.312 214.535c-27.264 0-53.468 4.531-77.908 12.872-31.899 32.14-68.507 57.787-109.819 76.95-33.382 41.37-53.382 93.989-53.382 151.287 0.001 133.16 107.949 241.108 241.109 241.108z m-17.431-445.363c102.178 0 185.009 82.831 185.009 185.009s-82.831 185.009-185.009 185.009-185.009-82.831-185.009-185.009 82.831-185.009 185.009-185.009z"
              fill="#FFC134"
              p-id="28216"
            ></path>
            <path
              d="M427.881 621.407c102.178 0 185.009-82.831 185.009-185.009s-82.831-185.009-185.009-185.009-185.009 82.831-185.009 185.009 82.831 185.009 185.009 185.009zM410.45 288.243c71.195 0 128.91 57.715 128.91 128.91s-57.715 128.91-128.91 128.91-128.91-57.715-128.91-128.91 57.715-128.91 128.91-128.91z"
              fill="#FFC634"
              p-id="28217"
            ></path>
            <path
              d="M410.45 417.153m-128.91 0a128.91 128.91 0 1 0 257.82 0 128.91 128.91 0 1 0-257.82 0Z"
              fill="#FFCB34"
              p-id="28218"
            ></path>
            <path
              d="M515.039 96.895c10.392 0 20.967 4.503 32.329 13.768 12.927 10.54 26.295 26.996 39.733 48.91 60.575 98.786 148.336 162.661 260.846 189.852 24.94 6.028 44.683 13.674 58.679 22.726 12.312 7.962 19.864 16.651 23.086 26.56 3.226 9.921 2.224 21.407-3.063 35.114-6.01 15.58-17.504 33.411-34.163 52.995-75.056 88.236-108.576 191.578-99.628 307.157 3.317 42.811-2.285 73.386-16.199 88.42-7.971 8.612-19.303 12.799-34.643 12.799-17.473 0-39.595-5.486-65.753-16.307C622.862 856.8 568.619 845.6 515.039 845.6c-53.579 0-107.822 11.2-161.221 33.289-26.159 10.82-48.283 16.307-65.756 16.307-15.337 0-26.668-4.187-34.64-12.801-13.918-15.037-19.522-45.612-16.207-88.419 8.952-115.578-24.566-218.921-99.623-307.157-16.66-19.585-28.155-37.415-34.165-52.995-5.287-13.707-6.29-25.193-3.063-35.114 3.222-9.909 10.774-18.597 23.086-26.56 13.996-9.052 33.739-16.698 58.679-22.726 112.51-27.19 200.271-91.066 260.846-189.852 13.439-21.915 26.807-38.37 39.734-48.91 11.363-9.264 21.938-13.767 32.33-13.767m0-18c-29.136 0-58.271 23.756-87.408 71.268-58.267 95.022-141.511 155.612-249.73 181.765-108.217 26.155-126.223 81.673-54.019 166.554 72.204 84.883 103.999 182.918 95.387 294.104-6.227 80.404 16.708 120.61 68.793 120.61 19.941 0 44.149-5.89 72.637-17.674C412.145 874.241 463.592 863.6 515.04 863.6s102.895 10.641 154.343 31.922c28.48 11.781 52.696 17.674 72.633 17.674 52.092 0 75.018-40.2 68.788-120.61-8.608-111.186 23.188-209.221 95.393-294.104 72.201-84.881 54.195-140.399-54.021-166.554-108.217-26.154-191.463-86.743-249.73-181.765-29.136-47.512-58.272-71.268-87.407-71.268z"
              fill="#FFA820"
              p-id="28219"
            ></path>
            <path
              d="M473.057 349.011c-27.991 45.521-67.972 74.548-119.948 87.078-51.98 12.527-60.628 39.126-25.947 79.788 34.678 40.664 49.952 87.63 45.816 140.894-4.139 53.266 18.504 69.703 67.928 49.314 49.42-20.391 98.843-20.391 148.264 0 49.42 20.389 72.062 3.953 67.928-49.314-4.135-53.265 11.133-100.23 45.815-140.894 34.681-40.662 26.034-67.261-25.947-79.788-51.977-12.531-91.961-41.558-119.947-87.078-27.99-45.524-55.977-45.524-83.962 0z"
              fill="#FFE3B4"
              p-id="28220"
            ></path>
            <path
              d="M316.189 368.714c-6.422 0-12.636-3.445-15.882-9.502-4.695-8.763-1.397-19.672 7.365-24.367 60.839-32.598 98.424-72.405 98.796-72.804 6.792-7.26 18.181-7.641 25.442-0.85 7.26 6.791 7.641 18.182 0.85 25.442-1.687 1.803-42.069 44.572-108.086 79.944a17.923 17.923 0 0 1-8.485 2.137z"
              fill="#FFFFFF"
              p-id="28221"
            ></path>
            <path
              d="M250.695 396.852c-7.311 0-14.186-4.487-16.878-11.742-3.458-9.32 1.293-19.68 10.613-23.138l10.546-3.914c9.321-3.459 19.68 1.293 23.138 10.613 3.458 9.32-1.293 19.68-10.613 23.138l-10.546 3.914a17.963 17.963 0 0 1-6.26 1.129z"
              fill="#FFFFFF"
              p-id="28222"
            ></path>
          </svg>
          <span>获得收藏 0</span>
          <h3>昨日 0</h3>
        </li>
        <div class="line"></div>
      </div>
      <div class="course">
        <h1>课程</h1>
        <el-button><span>Node</span></el-button>
        <el-button><span>Java</span></el-button>
        <el-button class="el"><span>HTML</span></el-button>
        <el-button class="el"><span>Ajax</span></el-button>
        <div class="line"></div>
      </div>
      <div class="skill">
        <h1>技能</h1>
        <div class="con">
          <li>
            <h3 class="h">.</h3>
            <h2>高级</h2>
            <span>暂无数据</span>
          </li>
          <li>
            <h3 class="hh">.</h3>
            <h2>进阶</h2>
            <el-button><span>表单</span></el-button>
            <div class="h4"><i class="el-icon-close"></i>1</div>
            <el-button class="b1"><span>标签</span></el-button>
            <div class="h5"><i class="el-icon-close"></i>8</div>
            <span class="ss">查看更多</span>
          </li>
          <li>
            <h3 class="hhh">.</h3>
            <h2 class="basics">基础</h2>
            <el-button class="b2"><span>v-for</span></el-button>
            <div class="h6"><i class="el-icon-close"></i>2</div>
            <el-button class="b2 b"><span>model</span></el-button>
            <div class="h7"><i class="el-icon-close"></i>5</div>
            <el-button class="b3"><span>extends继承</span></el-button>
            <div class="h8"><i class="el-icon-close"></i>3</div>
            <el-button class="b4"><span>字符串</span></el-button>
            <div class="h9"><i class="el-icon-close"></i>40</div>
            <span class="s">查看更多</span>
          </li>
        </div>
      </div>
    </div>
    <div class="center">
      <ul class="ul">
        <li>
          <h1>学习时长</h1>
          <div class="circleBox">
            <el-progress
              :width="100"
              :height="100"
              type="circle"
              :percentage="60"
              color="orange"
              :show-text="false"
            ></el-progress>
            <div class="circleCenter">
              <div>时长率</div>
              <div class="center">60%</div>
            </div>
            <div class="way">
              <div class="w">
                <h2>前端</h2>
                <div class="score">
                  <h3>6</h3>
                  <h4>/9</h4>
                </div>
                <el-progress
                  :percentage="percentage1"
                  :color="customColor1"
                ></el-progress>
              </div>
              <div class="w">
                <h2>后端</h2>
                <div class="score score1">
                  <h3>2</h3>
                  <h4>/6</h4>
                </div>
                <el-progress
                  :percentage="percentage2"
                  :color="customColor2"
                ></el-progress>
              </div>
              <div class="w">
                <h2 class="h">大数据</h2>
                <div class="score score2">
                  <h3>1</h3>
                  <h4>/6</h4>
                </div>
                <el-progress
                  :percentage="percentage3"
                  :color="customColor3"
                ></el-progress>
              </div>
            </div>
          </div>
        </li>
        <li>
          <h1>学习成就</h1>
          <svg
            t="1650439165897"
            class="icon1"
            viewBox="0 0 1117 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5469"
            width="100"
            height="100"
          >
            <path
              d="M709.30101 955.733333l-389.688889-1.422222L76.412121 628.622222l89.6-405.333333L518.723232 45.511111 870.012121 227.555556l85.333334 405.333333z"
              fill="#17CEAB"
              p-id="5470"
            ></path>
            <path
              d="M692.234343 915.911111l-356.977777-1.422222L114.812121 617.244444l81.066667-369.777777L518.723232 83.911111l321.422223 166.4 76.8 369.777778z"
              fill="#FFFFFF"
              p-id="5471"
            ></path>
            <path
              d="M680.856566 888.888889l-332.8-1.422222L140.412121 610.133333 217.212121 264.533333 518.723232 112.355556l300.088889 155.022222 72.533334 345.6z"
              fill="#42C7AE"
              p-id="5472"
            ></path>
            <path
              d="M440.50101 672.711111c-200.533333-83.911111-167.822222-305.777778-167.822222-308.622222l14.222222 2.844444c-1.422222 8.533333-29.866667 213.333333 159.288889 292.977778l-5.688889 12.8z"
              fill="#FFCB39"
              p-id="5473"
            ></path>
            <path
              d="M294.012121 349.866667c-4.266667 12.8-14.222222 21.333333-17.066666 19.911111-2.844444-1.422222-7.111111-14.222222-1.422223-27.022222 2.844444-8.533333 9.955556-17.066667 18.488889-19.911112 2.844444 8.533333 2.844444 18.488889 0 27.022223zM403.523232 651.377778c2.844444 8.533333-17.066667 21.333333-31.288889 24.177778-12.8 2.844444-27.022222-1.422222-36.977777-9.955556 5.688889-12.8 17.066667-22.755556 31.288889-24.177778 14.222222-4.266667 35.555556-1.422222 36.977777 9.955556zM402.10101 642.844444c-2.844444 0-14.222222-12.8-15.644444-24.177777-1.422222-9.955556 1.422222-19.911111 8.533333-28.444445 8.533333 4.266667 14.222222 14.222222 15.644444 24.177778 1.422222 9.955556-1.422222 19.911111-8.533333 28.444444zM358.012121 611.555556c-2.844444 0-12.8-14.222222-14.222222-25.6-1.422222-9.955556 2.844444-19.911111 9.955556-27.022223 8.533333 5.688889 12.8 14.222222 14.222222 25.6 0 9.955556-2.844444 19.911111-9.955556 27.022223zM322.456566 570.311111c-2.844444 0-11.377778-14.222222-9.955556-27.022222 0-9.955556 5.688889-19.911111 12.8-25.6 7.111111 7.111111 11.377778 17.066667 9.955556 27.022222 0 11.377778-9.955556 25.6-12.8 25.6zM295.434343 516.266667c-2.844444-1.422222-5.688889-18.488889-1.422222-28.444445 2.844444-9.955556 11.377778-17.066667 19.911111-19.911111 5.688889 8.533333 5.688889 19.911111 2.844445 29.866667-5.688889 8.533333-19.911111 18.488889-21.333334 18.488889zM281.212121 460.8c-2.844444-1.422222-2.844444-19.911111 1.422222-29.866667 4.266667-8.533333 12.8-15.644444 22.755556-17.066666 4.266667 9.955556 2.844444 21.333333-1.422222 29.866666-4.266667 11.377778-19.911111 19.911111-22.755556 17.066667zM278.367677 405.333333c-1.422222-1.422222 0-14.222222 5.688889-21.333333 4.266667-5.688889 12.8-8.533333 19.911111-8.533333 1.422222 7.111111-1.422222 15.644444-5.688889 21.333333-4.266667 5.688889-11.377778 8.533333-19.911111 8.533333zM358.012121 617.244444c2.844444 8.533333-17.066667 19.911111-32.711111 22.755556-12.8 2.844444-27.022222-2.844444-36.977778-12.8 7.111111-12.8 18.488889-21.333333 32.711111-22.755556 15.644444-1.422222 35.555556 2.844444 36.977778 12.8z"
              fill="#FFDE39"
              p-id="5474"
            ></path>
            <path
              d="M322.456566 574.577778c1.422222 9.955556-21.333333 15.644444-35.555556 14.222222-14.222222 0-25.6-8.533333-34.133333-19.911111 8.533333-11.377778 22.755556-17.066667 36.977778-14.222222 14.222222 0 34.133333 8.533333 32.711111 19.911111zM291.167677 521.955556c-1.422222 9.955556-24.177778 8.533333-38.4 1.422222-12.8-5.688889-22.755556-15.644444-25.6-29.866667 11.377778-7.111111 27.022222-8.533333 38.4-1.422222 14.222222 5.688889 29.866667 21.333333 25.6 29.866667zM276.945455 467.911111c-4.266667 7.111111-21.333333 0-29.866667-8.533333-8.533333-7.111111-14.222222-18.488889-14.222222-29.866667 11.377778-2.844444 22.755556 0 31.288889 8.533333 8.533333 8.533333 18.488889 22.755556 12.8 29.866667zM269.834343 413.866667c-4.266667 4.266667-15.644444-5.688889-19.911111-14.222223-4.266667-8.533333-5.688889-17.066667-2.844444-27.022222 8.533333 1.422222 17.066667 7.111111 21.333333 14.222222 4.266667 9.955556 7.111111 24.177778 1.422222 27.022223z"
              fill="#FFDE39"
              p-id="5475"
            ></path>
            <path
              d="M589.834343 672.711111l-5.688888-14.222222C774.723232 580.266667 744.856566 369.777778 744.856566 366.933333l14.222222-2.844444c0 2.844444 32.711111 224.711111-169.244445 308.622222z"
              fill="#FFCB39"
              p-id="5476"
            ></path>
            <path
              d="M736.323232 349.866667c4.266667 12.8 14.222222 21.333333 17.066667 19.911111 2.844444-1.422222 7.111111-14.222222 2.844444-27.022222-2.844444-8.533333-9.955556-17.066667-18.488888-19.911112-4.266667 8.533333-4.266667 18.488889-1.422223 27.022223zM626.812121 651.377778c-2.844444 8.533333 17.066667 21.333333 31.288889 24.177778 12.8 2.844444 27.022222-1.422222 36.977778-9.955556-5.688889-12.8-17.066667-22.755556-31.288889-24.177778-14.222222-4.266667-35.555556-1.422222-36.977778 9.955556zM628.234343 642.844444c2.844444 0 14.222222-12.8 15.644445-24.177777 1.422222-9.955556-1.422222-19.911111-8.533333-28.444445-8.533333 5.688889-14.222222 14.222222-15.644445 24.177778-1.422222 9.955556 1.422222 19.911111 8.533333 28.444444zM672.323232 611.555556c2.844444 0 12.8-14.222222 14.222223-25.6 1.422222-9.955556-2.844444-19.911111-9.955556-27.022223-8.533333 5.688889-12.8 14.222222-14.222222 25.6 0 9.955556 2.844444 19.911111 9.955555 27.022223zM707.878788 570.311111c2.844444 0 11.377778-14.222222 9.955555-27.022222 0-9.955556-5.688889-19.911111-12.8-25.6-7.111111 7.111111-11.377778 17.066667-9.955555 27.022222 0 11.377778 9.955556 25.6 12.8 25.6zM736.323232 516.266667c2.844444-1.422222 5.688889-18.488889 1.422223-28.444445-2.844444-9.955556-9.955556-17.066667-19.911112-19.911111-5.688889 8.533333-5.688889 19.911111-1.422222 29.866667 2.844444 8.533333 17.066667 18.488889 19.911111 18.488889zM749.123232 460.8c2.844444-1.422222 2.844444-19.911111-1.422222-29.866667-4.266667-8.533333-12.8-15.644444-22.755555-17.066666-4.266667 9.955556-2.844444 21.333333 1.422222 29.866666 5.688889 11.377778 19.911111 19.911111 22.755555 17.066667zM751.967677 405.333333c1.422222-1.422222 0-14.222222-5.688889-21.333333-4.266667-5.688889-11.377778-8.533333-19.911111-8.533333-1.422222 7.111111 1.422222 15.644444 5.688889 21.333333 5.688889 5.688889 12.8 8.533333 19.911111 8.533333zM672.323232 617.244444c-2.844444 8.533333 17.066667 19.911111 32.711111 22.755556 12.8 2.844444 27.022222-2.844444 36.977778-12.8-7.111111-12.8-18.488889-21.333333-32.711111-22.755556-14.222222-1.422222-35.555556 2.844444-36.977778 12.8z"
              fill="#FFDE39"
              p-id="5477"
            ></path>
            <path
              d="M707.878788 574.577778c-1.422222 9.955556 21.333333 15.644444 35.555555 14.222222 14.222222 0 25.6-8.533333 34.133334-19.911111-8.533333-11.377778-22.755556-17.066667-36.977778-14.222222-14.222222 0-34.133333 8.533333-32.711111 19.911111zM739.167677 521.955556c1.422222 9.955556 24.177778 8.533333 38.4 1.422222 12.8-5.688889 22.755556-15.644444 25.6-29.866667-11.377778-7.111111-27.022222-8.533333-38.4-1.422222-14.222222 5.688889-29.866667 21.333333-25.6 29.866667zM753.389899 467.911111c4.266667 7.111111 21.333333 0 29.866667-8.533333 8.533333-7.111111 14.222222-18.488889 14.222222-29.866667-11.377778-2.844444-22.755556 0-31.288889 8.533333-8.533333 8.533333-17.066667 22.755556-12.8 29.866667zM760.50101 413.866667c4.266667 4.266667 15.644444-5.688889 19.911111-14.222223 4.266667-8.533333 5.688889-17.066667 2.844445-27.022222-8.533333 1.422222-17.066667 7.111111-21.333334 14.222222-4.266667 9.955556-7.111111 24.177778-1.422222 27.022223z"
              fill="#FFDE39"
              p-id="5478"
            ></path>
            <path
              d="M548.120566 888.888889h-59.733334l-25.6-217.6h123.733334z"
              fill="#FF6822"
              opacity=".8"
              p-id="5479"
            ></path>
            <path
              d="M585.567677 671.288889H444.767677c-7.111111 0-14.222222-4.266667-17.066667-11.377778l-29.866667-65.422222h237.511112l-29.866667 65.422222c-5.688889 8.533333-12.8 12.8-19.911111 11.377778z"
              fill="#FFE339"
              p-id="5480"
            ></path>
            <path
              d="M545.745455 888.888889h-78.222223l-24.177777-217.6h122.311111z"
              fill="#FFC139"
              p-id="5481"
            ></path>
            <path
              d="M796.056566 887.466667s7.111111 7.111111-105.244445-35.555556c-17.066667-7.111111-36.977778 56.888889 32.711111 79.644445h98.133334s45.511111-9.955556 83.911111 46.933333c15.644444-35.555556 15.644444-75.377778 2.844444-110.933333 0 0-8.533333-14.222222 69.688889-17.066667-31.288889-46.933333-79.644444-76.8-133.688889-82.488889-21.333333 36.977778-36.977778 76.8-48.355555 119.466667zM235.70101 887.466667s-7.111111 7.111111 105.244445-35.555556c17.066667-7.111111 36.977778 56.888889-32.711112 79.644445h-98.133333s-45.511111-9.955556-83.911111 46.933333c-15.644444-35.555556-15.644444-75.377778-2.844444-110.933333 0 0 8.533333-14.222222-69.688889-17.066667 0 0 31.288889-65.422222 119.466666-73.955556 34.133333 56.888889 62.577778 110.933333 62.577778 110.933334z"
              fill="#FE8626"
              p-id="5482"
            ></path>
            <path
              d="M232.856566 893.155556l-86.755556-113.777778c119.466667-49.777778 247.466667-75.377778 375.466667-76.8 109.511111 0 248.888889 24.177778 345.6 86.755555-44.088889 82.488889-72.533333 102.4-72.533334 102.4s-291.555556-56.888889-561.777777 1.422223z"
              fill="#FE942D"
              p-id="5483"
            ></path>
            <path
              d="M326.723232 850.488889l-4.266666-14.222222c5.688889 0 11.377778-1.422222 17.066666-2.844445 9.955556-2.844444 17.066667-7.111111 14.222223-15.644444-2.844444-8.533333-9.955556-8.533333-22.755556-4.266667l-5.688889 1.422222-4.266667-12.8 5.688889-1.422222c11.377778-4.266667 18.488889-8.533333 15.644445-15.644444-1.422222-8.533333-8.533333-7.111111-17.066667-4.266667-5.688889 1.422222-11.377778 4.266667-15.644444 7.111111l-4.266667-12.8c5.688889-4.266667 11.377778-7.111111 18.488889-8.533333 19.911111-5.688889 32.711111-2.844444 36.977778 12.8 2.844444 8.533333-1.422222 17.066667-8.533334 19.911111 9.955556-1.422222 18.488889 5.688889 19.911111 14.222222 4.266667 15.644444-5.688889 25.6-27.022222 32.711111-7.111111 2.844444-12.8 4.266667-18.488889 4.266667zM380.767677 793.6c-7.111111-32.711111 4.266667-44.088889 22.755555-48.355556 19.911111-2.844444 32.711111 2.844444 36.977778 36.977778 4.266667 32.711111-5.688889 42.666667-22.755555 46.933334s-29.866667-2.844444-36.977778-35.555556z m44.088889-9.955556c-2.844444-21.333333-8.533333-27.022222-17.066667-24.177777-9.955556 1.422222-12.8 8.533333-8.533333 29.866666s8.533333 25.6 17.066666 24.177778 11.377778-7.111111 8.533334-29.866667zM513.034343 726.755556c1.422222 29.866667 2.844444 59.733333 2.844445 89.6h-14.222222l-1.422223-8.533334c-1.422222 5.688889-7.111111 9.955556-18.488888 11.377778-19.911111 1.422222-25.6-9.955556-28.444445-29.866667-1.422222-18.488889 1.422222-34.133333 22.755556-35.555555 12.8-1.422222 18.488889 2.844444 21.333333 7.111111 0-11.377778-1.422222-22.755556-1.422222-34.133333h17.066666z m-12.8 58.311111c0-12.8-4.266667-19.911111-17.066666-19.911111-12.8 1.422222-12.8 9.955556-11.377778 21.333333 1.422222 11.377778 2.844444 19.911111 15.644444 18.488889s12.8-7.111111 12.8-19.911111zM591.256566 773.688889c-1.422222 14.222222-1.422222 29.866667-2.844445 44.088889H572.767677l-1.422222-7.111111c-5.688889 5.688889-12.8 8.533333-19.911112 8.533333-14.222222 0-21.333333-7.111111-21.333333-19.911111 0-12.8 8.533333-19.911111 27.022222-19.911111H572.767677v-1.422222c0-7.111111-1.422222-9.955556-14.222222-11.377778-4.266667 0-9.955556 0-14.222223 1.422222v-14.222222h17.066667c22.755556-1.422222 29.866667 7.111111 29.866667 19.911111z m-19.911111 24.177778v-7.111111h-14.222223c-8.533333 0-12.8 1.422222-12.8 7.111111s2.844444 7.111111 9.955556 7.111111c7.111111 1.422222 14.222222-1.422222 17.066667-7.111111zM602.634343 827.733333c9.955556 1.422222 14.222222-1.422222 17.066667-7.111111-5.688889-21.333333-12.8-44.088889-19.911111-65.422222l19.911111 1.422222c4.266667 15.644444 7.111111 31.288889 9.955556 46.933334h1.422222c7.111111-14.222222 14.222222-28.444444 19.911111-42.666667l19.911111 2.844444c-9.955556 17.066667-21.333333 35.555556-29.866667 54.044445-11.377778 21.333333-18.488889 27.022222-39.822222 24.177778l1.422222-14.222223zM668.056566 827.733333l2.844444-14.222222c5.688889 2.844444 11.377778 5.688889 18.488889 7.111111 7.111111 1.422222 9.955556 1.422222 11.377778-4.266666 1.422222-5.688889 0-7.111111-9.955556-11.377778-12.8-5.688889-15.644444-11.377778-14.222222-21.333334 1.422222-9.955556 9.955556-17.066667 29.866667-12.8 5.688889 1.422222 12.8 4.266667 18.488889 7.111112l-4.266667 12.8c-5.688889-2.844444-9.955556-5.688889-15.644445-7.111112-8.533333-1.422222-9.955556-1.422222-11.377777 2.844445s1.422222 5.688889 9.955555 9.955555c14.222222 7.111111 15.644444 12.8 14.222222 24.177778-2.844444 14.222222-14.222222 17.066667-29.866666 12.8-7.111111-1.422222-14.222222-2.844444-19.911111-5.688889z"
              fill="#FFFFFF"
              p-id="5484"
            ></path>
            <path
              d="M641.034343 416.711111c0 75.377778-56.888889 135.111111-126.577777 135.111111S387.878788 490.666667 387.878788 416.711111c0-76.8 72.533333-126.577778 91.022222-209.066667 15.644444 14.222222 88.177778 38.4 86.755556 147.911112 21.333333-14.222222 25.6-51.2 25.6-51.2s51.2 65.422222 49.777777 112.355555z"
              fill="#FF5F1B"
              p-id="5485"
            ></path>
            <path
              d="M514.456566 563.2c-75.377778-1.422222-135.111111-66.844444-133.688889-146.488889 0-44.088889 21.333333-78.222222 44.088889-113.777778 21.333333-28.444444 36.977778-61.155556 45.511111-96.711111l2.844444-12.8 8.533334 8.533334c4.266667 2.844444 7.111111 5.688889 11.377777 8.533333 45.511111 24.177778 75.377778 73.955556 76.8 128 5.688889-11.377778 9.955556-22.755556 11.377778-35.555556l1.422222-17.066666 9.955556 12.8c2.844444 2.844444 55.466667 69.688889 54.044444 118.044444 1.422222 79.644444-58.311111 145.066667-132.266666 146.488889z m-32.711111-344.177778c-9.955556 32.711111-25.6 64-45.511112 91.022222-21.333333 34.133333-42.666667 66.844444-42.666666 105.244445 0 71.111111 54.044444 128 120.888889 128s120.888889-56.888889 120.888889-128c0-32.711111-27.022222-75.377778-42.666667-96.711111-4.266667 17.066667-12.8 31.288889-25.6 41.244444l-11.377778 7.111111v-14.222222c1.422222-86.755556-45.511111-116.622222-69.688889-132.266667l-4.266666-1.422222z"
              fill="#FFFFFF"
              p-id="5486"
            ></path>
            <path
              d="M582.723232 482.133333c0 18.488889-7.111111 36.977778-19.911111 49.777778-12.8 12.8-29.866667 19.911111-48.355555 19.911111-36.977778 0-76.8-32.711111-68.266667-71.111111s27.022222-38.4 29.866667-91.022222c0-1.422222 0-1.422222 1.422222-2.844445s1.422222-1.422222 2.844444-1.422222c36.977778 9.955556 102.4 58.311111 102.4 96.711111z"
              fill="#FEAD04"
              p-id="5487"
            ></path>
            <path
              d="M551.434343 517.688889c0 14.222222-17.066667 28.444444-38.4 28.444444-21.333333 0-38.4-12.8-38.4-28.444444s36.977778-46.933333 44.088889-54.044445h2.844445c5.688889 7.111111 29.866667 39.822222 29.866666 54.044445z"
              fill="#F97C4E"
              p-id="5488"
            ></path>
            <path
              d="M420.589899 533.333333h190.577778c12.8 0 22.755556 11.377778 22.755555 24.177778V597.333333H397.834343v-38.4c0-7.111111 2.844444-12.8 7.111112-17.066666 2.844444-7.111111 9.955556-8.533333 15.644444-8.533334z"
              fill="#FFFFFF"
              p-id="5489"
            ></path>
            <path
              d="M3.878788 0h1024v1024H3.878788z"
              fill="#D8D8D8"
              fill-opacity="0"
              p-id="5490"
            ></path>
          </svg>
          <h5>月度每日学习目标全部达成</h5>
          <h5 class="h5">完成前端6个课程的学习</h5>
          <h1 class="h1">即将获得</h1>
          <h2 class="h2">前端课程学习目标全部达成</h2>
          <svg
            t="1650429615184"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3887"
            width="35"
            height="35"
          >
            <path
              d="M556.544 347.136l-9.216-46.592H338.432v394.752h46.592v-162.304h130.048l9.216 46.592h162.304V347.136h-130.048z"
              fill="#FFCB99"
              p-id="3888"
            ></path>
            <path
              d="M649.216 404.992L640 358.4H431.104v394.752h46.592v-162.304h130.048l9.216 46.592h162.304V404.992h-130.048z"
              fill="#FF7E00"
              p-id="3889"
            ></path>
            <path
              d="M832 699.392h-29.696v-29.696c0-6.656-5.12-11.776-11.776-11.776s-11.776 5.12-11.776 11.776v29.696h-29.696c-6.656 0-11.776 5.12-11.776 11.776 0 6.656 5.12 11.776 11.776 11.776h29.696v29.696c0 6.656 5.12 11.776 11.776 11.776s11.776-5.12 11.776-11.776v-29.696h29.696c6.656 0 11.776-5.12 11.776-11.776 0-6.656-5.12-11.776-11.776-11.776zM825.856 260.096c14.848 14.848 10.24 33.792 6.656 47.616-3.584 13.824-4.096 20.48 0.512 25.6 5.12 5.12 11.264 4.096 25.6 0.512 13.824-3.584 32.768-8.192 47.616 6.656 14.848 14.848 10.24 33.28 6.656 47.104-3.584 13.824-4.608 20.48 0.512 25.6 4.608 4.608 4.608 11.776 0 16.384s-11.776 4.608-16.384 0c-14.848-14.848-10.24-33.28-6.656-47.104 3.584-13.824 4.608-20.48-0.512-25.6s-11.264-4.096-25.6-0.512c-13.824 3.584-32.768 8.192-47.104-6.656-14.848-14.848-10.24-33.792-6.656-47.616 3.584-13.824 4.608-20.48-0.512-25.6s-11.776-4.096-25.6-0.512c-13.824 3.584-32.768 8.192-47.616-6.656-4.608-4.608-4.608-11.776 0-16.384 4.608-4.608 11.776-4.608 16.384 0 5.12 5.12 11.264 4.096 25.6 0.512 13.824-3.072 32.768-7.68 47.104 6.656z"
              fill="#FFC879"
              p-id="3890"
            ></path>
            <path
              d="M212.00896 602.33216l46.336-46.336 46.34624 46.336-46.34112 46.34112z"
              fill="#FFF7EC"
              p-id="3891"
            ></path>
            <path
              d="M637.952 763.904m-32.768 0a32.768 32.768 0 1 0 65.536 0 32.768 32.768 0 1 0-65.536 0Z"
              fill="#FFF7EC"
              p-id="3892"
            ></path>
            <path
              d="M227.328 279.552c-30.72 0-56.32 25.088-56.32 56.32s25.088 56.32 56.32 56.32 56.32-25.088 56.32-56.32-25.088-56.32-56.32-56.32z m0 89.088c-17.92 0-32.768-14.848-32.768-32.768 0-17.92 14.848-32.768 32.768-32.768 17.92 0 32.768 14.848 32.768 32.768 0.512 17.92-14.336 32.768-32.768 32.768z"
              fill="#FFC879"
              p-id="3893"
            ></path>
          </svg>
        </li>
      </ul>
      <div class="learn">
        <div class="top">
          <span>过去一共学习</span>
          <h1>765</h1>
          <h2>次</h2>
          <i class="el-icon-warning-outline"></i>
        </div>
        <div class="charts" ref="charts"></div>
      </div>
      <div class="bottom">
        <div
          class="btm"
          :class="{ c1: y1 == 0, c2: y1 != 0 }"
          @click="Status1()"
        >
          <svg
            t="1650465176734"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7235"
            width="26"
            height="26"
          >
            <path
              d="M303.313 839.094h-119.25c-41.738 0-59.625-26.888-59.625-59.625V183.5c0-52.875 10.237-59.625 59.624-59.625h476.832c46.125 0 60.469 15.469 60.469 59.625v80.044c0 41.625 59.625 46.969 59.625 0v-79.875c0-87.863-28.407-119.194-120.207-119.194H183.894c-58.163 0-118.913 7.144-118.913 116.775V799.1a113.485 113.485 0 0 0 4.95 34.763 93.825 93.825 0 0 0 91.856 65.08c72.957 0.282 102.544 0 141.638 0 39.094 0 36.337-59.793-0.169-59.793z"
              p-id="7236"
              fill="#dbdbdb"
            ></path>
            <path
              d="M244.025 242.844c-42.806 0-44.719 60.412 0 60.412h357.637c40.95 0 47.475-60.356 0-60.412H244.026z m96.019 178.706h-96.019c-42.806 0-44.719 60.412 0 60.412h96.019c40.95 0 47.475-60.356 0-60.412zM660.894 363.219A298.012 298.012 0 1 0 958.962 661.23c0.057-166.837-137.08-298.012-298.068-298.012z m0 536.456a238.444 238.444 0 1 1 238.443-238.444A239.231 239.231 0 0 1 660.894 899.9v-0.225z"
              p-id="7237"
              fill="#dbdbdb"
            ></path>
            <path
              d="M765.237 557l-146.08 146.138-62.607-62.607c-5.963-11.925-29.813-11.925-41.737 0a28.8 28.8 0 0 0 0 41.738l83.53 83.475a28.8 28.8 0 0 0 41.738 0l166.894-166.95a29.531 29.531 0 0 0-41.681-41.738h-0.056z"
              p-id="7238"
              fill="#dbdbdb"
            ></path>
          </svg>
          <h1>最近学习</h1>
        </div>
        <div
          class="btm"
          :class="{ c1: y1 == 1, c2: y1 != 1 }"
          @click="Status2()"
        >
          <svg
            t="1650465245123"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="8305"
            width="25"
            height="25"
          >
            <path
              d="M927.68 698.912c0-0.576 0.32-1.056 0.32-1.664v-564.32C928 77.28 883.552 32 828.928 32H195.04C140.448 32 96 77.28 96 132.928v758.144C96 946.72 140.448 992 195.04 992h480.032a31.872 31.872 0 0 0 20.96-7.84l153.856-133.632a32 32 0 1 0-41.92-48.32L704 892.512V772.96c0-20.384 15.712-36.96 35.072-36.96h157.632a32 32 0 0 0 32-32c-0.032-1.792-0.768-3.36-1.024-5.088zM640 772.928V928H195.04c-19.328 0-35.04-16.576-35.04-36.928V132.928C160 112.576 175.712 96 195.04 96h633.888C848.288 96 864 112.576 864 132.928V672H739.072C684.448 672 640 717.28 640 772.928zM448 752a48 48 0 1 0 96 0 48 48 0 1 0-96 0z m42.432-560a181.568 181.568 0 0 0-181.568 181.568 32 32 0 0 0 64 0 117.6 117.6 0 0 1 235.136 0c0 64.928-52.64 125.472-117.568 125.472a32 32 0 0 0-32 32v62.816a32 32 0 0 0 64 0v-33.632C607.456 545.088 672 462.912 672 373.568A181.568 181.568 0 0 0 490.432 192z"
              p-id="8306"
              fill="#e6e6e6"
            ></path>
          </svg>
          <h1>题解</h1>
        </div>
        <div
          class="btm"
          :class="{ c1: y1 == 2, c2: y1 != 2 }"
          @click="Status3()"
        >
          <svg
            t="1650465302216"
            class="icon icons"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="9766"
            width="28"
            height="28"
          >
            <path
              d="M518.965333 847.498667c-21.290667 3.84-43.232 5.834667-65.632 5.834666a366.4 366.4 0 0 1-189.002666-52.181333 2118.4 2118.4 0 0 0-15.306667-8.981333l-86.944 23.712c-23.893333 6.506667-45.813333-15.402667-39.296-39.296l23.68-86.848c-8.821333-15.008-14.656-25.152-17.632-30.709334A366.485333 366.485333 0 0 1 85.333333 485.333333C85.333333 282.090667 250.090667 117.333333 453.333333 117.333333c185.514667 0 338.965333 137.269333 364.32 315.776A255.850667 255.850667 0 0 1 938.666667 650.666667c0 42.709333-10.496 83.978667-30.261334 120.842666-1.792 3.338667-4.992 8.928-9.696 16.96l14.613334 53.557334c6.506667 23.893333-15.402667 45.813333-39.296 39.296l-53.642667-14.634667-6.229333 3.669333A254.933333 254.933333 0 0 1 682.666667 906.666667a255.061333 255.061333 0 0 1-163.701334-59.168z m79.861334-24.042667A191.36 191.36 0 0 0 682.666667 842.666667a190.933333 190.933333 0 0 0 98.570666-27.2c2.208-1.322667 8.288-4.874667 18.517334-10.837334a32 32 0 0 1 24.522666-3.210666l12.565334 3.424-3.424-12.565334a32 32 0 0 1 3.338666-24.725333 996.672 996.672 0 0 0 15.242667-26.293333A190.997333 190.997333 0 0 0 874.666667 650.666667a191.68 191.68 0 0 0-54.634667-134.186667C808.458667 654.570667 720.650667 770.965333 598.826667 823.466667z m-387.050667-129.92l-12.512 45.866667 45.866667-12.512a32 32 0 0 1 24.522666 3.221333c15.253333 8.885333 24.373333 14.218667 27.594667 16.149333A302.4 302.4 0 0 0 453.333333 789.333333C621.226667 789.333333 757.333333 653.226667 757.333333 485.333333S621.226667 181.333333 453.333333 181.333333 149.333333 317.44 149.333333 485.333333c0 50.794667 12.448 99.712 35.904 143.456 3.104 5.792 10.933333 19.306667 23.2 40.021334a32 32 0 0 1 3.338667 24.725333zM586.666667 373.333333a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h266.666667zM458.666667 533.333333a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h138.666667z"
              p-id="9767"
              fill="#dbdbdb"
            ></path>
          </svg>
          <h1>讨论发布</h1>
        </div>
        <ul v-show="y1 == 0">
          <li class="li">
            <h1>1035. 两颗二叉搜索树中的所有元素</h1>
            <h2>2小时前</h2>
          </li>
          <li>
            <h1>54. 并发类库提供的线程池实现</h1>
            <h2>8小时前</h2>
          </li>
          <li class="li">
            <h1>427. 建立四叉树</h1>
            <h2>1天前</h2>
          </li>
          <li>
            <h1>5213. attribute 和 property的区别</h1>
            <h2>2天前</h2>
          </li>
          <li class="li">
            <h1>100. JDK 动态代理与 CGLIB 区别</h1>
            <h2>2天前</h2>
          </li>
          <li>
            <h1>756. 块级格式化上下文BFC</h1>
            <h2>3天前</h2>
          </li>
          <li class="li">
            <h1>256. 太平洋大西洋水流问题</h1>
            <h2>5天前</h2>
          </li>
          <li>
            <h1>412. 三维形体投影面积</h1>
            <h2>6天前</h2>
          </li>
          <li class="li">
            <h1>333. 按奇偶排序数组</h1>
            <h2>7天前</h2>
          </li>
        </ul>
        <ul v-show="y1 == 1">
          <li class="li">
            <h1>386. 字典序排数 - 字典排序树（JAVA回溯）</h1>
            <div class="right">
              <h2>2小时前</h2>
              <div class="con_1">
                <van-icon name="good-job-o" class="icon_1" />
                <h3>0</h3>
              </div>
              <div class="con_2">
                <van-icon name="eye-o" class="icon_2" />
                <h4>3</h4>
              </div>
            </div>
          </li>
          <li>
            <h1>2195. 向数组中追加 K 个整数 - 瞎几把乱写过了</h1>
            <h2>8小时前</h2>
            <div class="con_1">
              <van-icon name="good-job-o" class="icon_1" />
              <h3>0</h3>
            </div>
            <div class="con_2">
              <van-icon name="eye-o" class="icon_2" />
              <h4>9</h4>
            </div>
          </li>
          <li class="li">
            <h1>427. 太平洋大西洋水流问题 - 暴力DFC</h1>
            <h2>1天前</h2>
            <div class="con_1">
              <van-icon name="good-job-o" class="icon_1" />
              <h3>0</h3>
            </div>
            <div class="con_2">
              <van-icon name="eye-o" class="icon_2" />
              <h4>5</h4>
            </div>
          </li>
          <li>
            <h1>91. 解码方法 - 官方题解通俗易懂版本</h1>
            <h2>2天前</h2>
            <div class="con_1">
              <van-icon name="good-job-o" class="icon_1" />
              <h3>0</h3>
            </div>
            <div class="con_2">
              <van-icon name="eye-o" class="icon_2" />
              <h4>4</h4>
            </div>
          </li>
          <li class="li">
            <h1>413. 等差数列划分 - 官方题解通俗易懂版本</h1>
            <h2>2天前</h2>
            <div class="con_1">
              <van-icon name="good-job-o" class="icon_1" />
              <h3>0</h3>
            </div>
            <div class="con_2">
              <van-icon name="eye-o" class="icon_2" />
              <h4>9</h4>
            </div>
          </li>
          <li>
            <h1>42. 接雨水 - 官方题解通俗易懂版本</h1>
            <h2>3天前</h2>
            <div class="con_1">
              <van-icon name="good-job-o" class="icon_1" />
              <h3>0</h3>
            </div>
            <div class="con_2">
              <van-icon name="eye-o" class="icon_2" />
              <h4>2</h4>
            </div>
          </li>
          <li class="li">
            <h1>152. 乘积最大子数组 - 官方题解通俗易懂版本</h1>
            <h2>5天前</h2>
            <div class="con_1">
              <van-icon name="good-job-o" class="icon_1" />
              <h3>0</h3>
            </div>
            <div class="con_2">
              <van-icon name="eye-o" class="icon_2" />
              <h4>7</h4>
            </div>
          </li>
          <li>
            <h1>412. 三维形体投影面积 - 暴力DFC</h1>
            <h2>6天前</h2>
            <div class="con_1">
              <van-icon name="good-job-o" class="icon_1" />
              <h3>0</h3>
            </div>
            <div class="con_2">
              <van-icon name="eye-o" class="icon_2" />
              <h4>8</h4>
            </div>
          </li>
          <li class="li">
            <h1>333. 按奇偶排序数组 - 暴力DFC</h1>
            <h2>7天前</h2>
            <div class="con_1">
              <van-icon name="good-job-o" class="icon_1" />
              <h3>0</h3>
            </div>
            <div class="con_2">
              <van-icon name="eye-o" class="icon_2" />
              <h4>5</h4>
            </div>
          </li>
        </ul>
        <img src="./images/1.webp" alt="" v-show="y1 == 2" />
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myChart = echarts.init(this.$refs.charts);
    function getVirtulData(year) {
      year = year || "2022";
      var date = +echarts.number.parseDate(year + "-01-01");
      var end = +echarts.number.parseDate(year + "-12-31");
      var dayTime = 3600 * 24 * 1000;
      var data = [];
      for (var time = date; time < end; time += dayTime) {
        data.push([
          echarts.format.formatTime("yyyy-MM-dd", time),
          Math.floor(Math.random() * 10000),
        ]);
      }
      return data;
    }
    const data = getVirtulData("2022");
    var option = {
      visualMap: {
        show: false,
        min: 0,
        max: 10000,
      },
      axisLabel: {
        formatter: function (value) {
          return value.split("").join("\n");
        },
      },
      calendar: {
        range: "2022",
        cellSize: [15.5, 15.5],
        splitLine: {
          show: true,
          lineStyle: {
            //那个图上现在的黑线颜色
            color: "#36393f",
            width: 4,
            dashOffset: 20,
            type: "solid",
          },
        },
        //每个方kuai之间的间隙的css
        itemStyle: {
          color: "#fff",
          borderWidth: 2,
          borderColor: "#fff",
        },
        dayLabel: {
          color: "white",
        },
        monthLabel: {
          color: "white",
          margin: 10,
        },
      },
      gradientColor: [
        "rgba(0, 0, 0, 0.85)",
        "#4CC575",
        "#159D51",
        "#00772F",
        "#00530D",
        "#003100",
      ],
      series: {
        type: "heatmap",
        coordinateSystem: "calendar",
        data: getVirtulData("2022"),
      },
    };
    myChart.setOption(option);
  },
  data() {
    return {
      percentage1: 70,
      customColor1: "#1989fa",
      percentage2: 50,
      customColor2: "#5cb87a",
      percentage3: 30,
      customColor3: "#f56c6c",
      y1: 0,
    };
  },
  methods: {
    Status1() {
      this.y1 = 0;
    },
    Status2() {
      this.y1 = 1;
    },
    Status3() {
      this.y1 = 2;
    },
  },
};
</script>

<style lang="less" scoped>
.personal {
  position: relative;
  margin: 0 auto;
  width: 80%;
  z-index: 0;
  .top {
    width: 100%;
    img {
      position: relative;
      left: -43em;
      width: 70px;
      height: 70px;
      border-radius: 10px;
    }
    .content {
      position: absolute;
      top: -4em;
      left: 8em;
      color: white;
      h1 {
        font-size: 16px;
      }
      span {
        position: absolute;
        margin: -9em -2.3em;
        font-size: 14px;
      }
    }
    .right {
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      position: absolute;
      border-radius: 10px;
      top: 0.5em;
      left: 71.5em;
      width: 250px;
      height: 90px;
      background-color: #36393f;
      .image {
        position: relative;
        top: -0.2em;
        left: 0.5em;
        margin-right: 1em;
      }
    }
  }
  .my {
    display: flex;
    margin-top: -3.5em;
    width: 200px;
    height: 86em;
    background-color: #36393f;
    border-radius: 10px;
    float: left;
    color: white;
    list-style-type: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    .m {
      margin: -4em 2.6em;
      .text-2 {
        margin: -11.5em 0;
      }
    }
    .line {
      margin-top: 2.2em;
      width: 1px;
      height: 32px;
      background-color: grey;
    }
    .btn {
      position: absolute;
      display: inline-block;
      width: 175px;
      height: 35px;
      background-color: #e3e3e6;
      color: black;
      border-radius: 10px;
      border: none;
      margin: 6.5em 1em;
      font-size: 12px;
    }
    .brief {
      position: absolute;
      margin: 5em -2.6em;
      h1 {
        margin-left: 3em;
        height: 2.2em;
        font-size: 15px;
      }
      img {
        margin: -0.6em;
        width: 2em;
        height: 2em;
      }
      .line {
        margin: -4.5em 3.4em;
        width: 170%;
        height: 0.5px;
        background: linear-gradient(
          135deg,
          rgb(100, 100, 100),
          rgb(300, 300, 300),
          rgb(100, 100, 100)
        );
      }
    }
    .achieve {
      position: absolute;
      margin-top: 12.2em;
      margin-left: 0.2em;
      h1 {
        margin-left: -1em;
        font-size: 15px;
      }
      li {
        margin-top: -10em;
        .icon {
          margin: -5px 8px;
        }
        span {
          font-size: 13px;
        }
        .icon1 {
          position: absolute;
          margin: 60px 15px;
        }
        h3 {
          margin: -13.3em 0;
          font-size: 10px;
          color: #adb0b8;
        }
      }
      .li {
        margin-left: -0.8em;
      }
      .line {
        margin: 6.9em 0.5em;
        width: 180%;
        height: 0.5px;
        background: linear-gradient(
          135deg,
          rgb(100, 100, 100),
          rgb(300, 300, 300),
          rgb(100, 100, 100)
        );
      }
    }
    .course {
      position: absolute;
      margin-top: 35em;
      width: 150px;
      h1 {
        margin-left: -6.2em;
        font-size: 15px;
      }
      .el-button {
        position: relative;
        top: -10em;
        left: 1.5em;
        display: inline-block;
        width: 5em;
        height: 2em;
        text-align: center;
        font-size: unset;
        border: none;
        border-radius: 10px;
        background-color: #e3e3e6;
        color: black;
        span {
          display: block;
          margin-top: -0.4em;
          margin-left: -0.4em;
        }
      }
      .el {
        position: relative;
        top: -20em;
        left: 1.1em;
      }
      .line {
        margin: -23.5em 0.7em;
        width: 120%;
        height: 0.5px;
        background: linear-gradient(
          135deg,
          rgb(100, 100, 100),
          rgb(300, 300, 300),
          rgb(100, 100, 100)
        );
      }
    }
    .skill {
      position: absolute;
      margin-top: 47.5em;
      width: 75px;
      h1 {
        margin-left: -1.5em;
        font-size: 15px;
      }
      .con {
        position: relative;
        top: -2.2em;
        li {
          margin: -8em 1em;
          .h {
            position: absolute;
            top: -0.25em;
            float: left;
            font-size: 20px;
            color: red;
          }
          .hh {
            position: absolute;
            top: 2.95em;
            float: left;
            font-size: 20px;
            color: yellow;
          }
          .hhh {
            position: absolute;
            top: 8.1em;
            float: left;
            font-size: 20px;
            color: green;
          }
          h2 {
            font-size: 10px;
          }
          span {
            width: 100px;
            position: absolute;
            top: 3em;
            color: #adb0b8;
          }
          .el-button {
            position: relative;
            top: -4em;
            left: 0.5em;
            display: block;
            width: 3.5em;
            text-align: center;
            border: none;
            border-radius: 10px;
            background-color: #e3e3e6;
            color: black;
            float: left;
            span {
              font-size: 5px;
              color: black;
              margin: -1.5em -10em;
            }
          }
          .h4 {
            width: 20px;
            position: absolute;
            color: #adb0b8;
            top: 8.4em;
            left: 5.8em;
          }
          .h5 {
            width: 20px;
            position: absolute;
            color: #adb0b8;
            top: 8.4em;
            left: 12.3em;
          }
          .h6 {
            width: 20px;
            position: absolute;
            color: #adb0b8;
            top: 17.4em;
            left: 5.8em;
          }
          .h7 {
            width: 20px;
            position: absolute;
            color: #adb0b8;
            top: 17.4em;
            left: 12.3em;
          }
          .h8 {
            width: 20px;
            position: absolute;
            color: #adb0b8;
            top: 20.6em;
            left: 9em;
          }
          .h9 {
            width: 40px;
            position: absolute;
            color: #adb0b8;
            top: 23.6em;
            left: 6em;
          }
          .b1 {
            margin: -1.7em 5.5em;
          }
          .b2 {
            margin: 6em 0;
          }
          .b {
            margin: -7.7em 5.5em;
          }
          .ss {
            margin: 8.5em -1em;
            color: white;
          }
          .basics {
            position: absolute;
            margin: 4em 1.3em;
          }
          .b3 {
            margin: -5em 0;
            width: 6em;
          }
          .b4 {
            margin: -2.3em 0;
            width: 4em;
          }
          .s {
            margin: 23.5em 1em;
            color: white;
          }
        }
      }
    }
  }
  .center {
    .ul {
      position: relative;
      top: -8.5em;
      left: 1.5em;
      li {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        margin-right: 1.5em;
        margin-top: 5em;
        float: left;
        width: 435px;
        height: 180px;
        border-radius: 10px;
        background-color: #36393f;
        h1 {
          color: white;
          margin: -3.5em 1.5em;
          float: left;
          font-size: 14px;
          color: #cdcfd3;
        }
        .h1 {
          position: absolute;
          margin: -1.2em 1.5em;
        }
        .icon {
          position: absolute;
          top: 15.75em;
          margin-left: -2em;
        }
        .icon1 {
          position: absolute;
          top: 6.5em;
          margin-left: 3em;
        }
        .h2 {
          position: absolute;
          color: white;
          top: 8em;
          margin-left: 2em;
        }
        .circleBox {
          position: relative;
          top: 4.8em;
          left: -6em;
          text-align: center;
          width: 200px;
          .circleCenter {
            color: white;
            position: absolute;
            top: -2.7em;
            left: 8.5em;
            font-size: 15px;
            .center {
              margin-top: -13em;
              font-size: 10px;
            }
          }
        }
        .way {
          position: relative;
          top: -21.5em;
          color: white;
          .w {
            h2 {
              width: 240px;
              position: relative;
              font-size: 12px;
              margin: -2em 10em;
            }
            .score {
              position: relative;
              top: -11.3em;
              left: 23em;
              h3 {
                float: left;
                font-size: 19px;
                margin-right: 0.3em;
              }
              h4 {
                font-size: 12.3px;
                color: #adb0b8;
                float: left;
              }
            }
            .score1 {
              position: relative;
              left: 20.9em;
            }
            .score2 {
              position: relative;
              left: 18.8em;
            }
            .el-progress {
              position: relative;
              width: 265px;
              margin: -5.2em 18.2em;
              /deep/ .el-progress__text {
                color: white;
              }
            }
            .h {
              margin-left: 10.5em;
            }
          }
        }
        h5 {
          position: relative;
          color: white;
          top: -2em;
          left: -12em;
          font-size: 13px;
        }
        .h5 {
          margin: -10em 1.4em;
        }
      }
    }
    .learn {
      position: relative;
      width: 74em;
      height: 19em;
      border-radius: 10px;
      background-color: #36393f;
      top: 13em;
      left: 18em;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      .top {
        span {
          position: absolute;
          top: -2.9em;
          left: 1.5em;
          font-size: 16px;
          color: #e9eaed;
        }
        h1 {
          position: absolute;
          top: -2.4em;
          left: 6.5em;
          font-size: 20px;
          color: white;
        }
        h2 {
          position: absolute;
          top: -3.1em;
          left: 11.5em;
          font-size: 15px;
          color: #e9eaed;
        }
        i {
          position: absolute;
          top: 1.45em;
          left: 11.3em;
          font-size: 17px;
          color: #bcc0c9;
        }
      }
      .charts {
        position: absolute;
        margin: 2.7em -2em;
        width: 100em;
        height: 20em;
      }
    }
    .bottom {
      position: relative;
      width: 74em;
      height: 49em;
      border-radius: 10px;
      background-color: #36393f;
      top: 14.5em;
      left: 18em;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      color: white;
      .btm {
        position: relative;
        width: 10em;
        height: 4em;
        line-height: 4em;
        float: left;
        left: -15em;
        margin: 1em 0;
        border-radius: 7px;
        .icon {
          position: relative;
          float: left;
          left: 1em;
          top: 1em;
        }
        .icons {
          margin-top: -0.2em;
        }
        h1 {
          font-size: 14px;
        }
      }
      .c1 {
        background-color: #202225;
      }
      .c2 {
        background-color: transparent;
      }
      ul {
        position: relative;
        top: 7.5em;
        li {
          border-radius: 7px;
          margin: 0 auto;
          padding: 0 1.5em;
          width: 92%;
          height: 4.4em;
          line-height: 4.4em;
          background-color: transparent;
          h1 {
            position: absolute;
            font-family: "宋体", serif;
            font-size: 14px;
            text-align: left;
          }
          h2 {
            position: absolute;
            right: 2.5em;
            font-family: "楷体", serif;
            font-size: 16px;
            color: #bfbfbf;
          }
          .con_1 {
            position: absolute;
            width: 4em;
            right: 14em;
            .icon_1 {
              top: 0.8em;
              font-size: 20px;
              float: left;
            }
            h3 {
              font-family: "楷体", serif;
              font-size: 16px;
              color: #bfbfbf;
            }
          }
          .con_2 {
            position: absolute;
            right: 9em;
            width: 4em;
            .icon_2 {
              font-size: 20px;
              float: left;
              top: 0.8em;
            }
            h4 {
              font-family: "楷体", serif;
              font-size: 16px;
              color: #bfbfbf;
            }
          }
        }
        .li {
          background-color: #202225;
        }
      }
      img {
        position: absolute;
        top: 20em;
        left: 25em;
        transform: scale(1.3);
      }
    }
  }
}
</style>